import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import Breadcrumb from '../base/Breadcrumb'
import { Layout, Form, Input, Radio } from 'element-react'

class sellerDetail extends Component {
  constructor (props) {
    super(props);
    
    this.state = {
      form: {
        shopName: '索尼SONY产品自营店',
        brandName: 'SONY',
        productCategory: [{
          option1: '手机数码',
          option2: '影音娱乐',
          option3: '耳机'
        }, {
          option1: '手机数码',
          option2: '摄影摄像',
          option3: '单反相机'
        }, {
          option1: '家用电器',
          option2: '电视',
          option3: 'HDR电视'
        }],
        shopType: '自营店',
        phone: '123456',
        remark: 'email:snoy@qq.com',
        shopIntroduce: '索尼SONY产品自营店',
        deliveryArea: '日本东京',
        businessLicense: '',
        businessLicenseAndOfficialSeal: ''
      }
    };
  }
  
  toString (obj) {
    let str = '';
    for (let key in obj) {
      str += obj[key] + '/'
    }
    return str.slice(0, -1)
  }
  
  render () {
    const width = {
      width: 400
    };
    
    return (
      <div>
        <Breadcrumb data={['商家管理', '商家列表', '查看']}/>
        {/*表单*/}
        <Form className="content" model={this.state.form} labelPosition="right" labelSuffix="：" labelWidth="180">
          <Form.Item label="店铺名称" prop="shopName">
            <Input
              value={this.state.form.shopName}
              size="small"
              className="inputSmall"
              disabled
            />
          </Form.Item>
          <Form.Item label="品牌名称" prop="brandName">
            <Input
              value={this.state.form.brandName}
              size="small"
              className="inputSmall"
              disabled
            />
          </Form.Item>
          {
            this.state.form.productCategory.map((el, index) => {
              return (
                <Form.Item className="inputRow" key={index} label={index === 0 ? '商品类目' : ''} prop={`productCategory:${index}`}>
                  <Input
                    value={this.toString(el)}
                    size="small"
                    className="inputSmall"
                    disabled
                  />
                </Form.Item>
              )
            })
          }
          <Form.Item label="店铺类型" prop="shopType">
            <Input
              value={this.state.form.shopType}
              size="small"
              className="inputSmall"
              disabled
            />
          </Form.Item>
          <Form.Item label="联系电话" prop="phone">
            <Input
              value={this.state.form.phone}
              size="small"
              className="inputSmall"
              disabled
            />
          </Form.Item>
          <Form.Item label="备注" prop="remark">
            <Input
              type="textarea"
              style={width}
              autosize={{ minRows: 4, maxRows: 8}}
              value={this.state.form.remark}
              disabled
            />
          </Form.Item>
          <Form.Item label="店铺介绍" prop="shopIntroduce">
            <Input
              type="textarea"
              style={width}
              autosize={{ minRows: 4, maxRows: 8}}
              value={this.state.form.shopIntroduce}
              disabled
            />
          </Form.Item>
          <Form.Item label="发货地区" prop="deliveryArea">
            <Input
              value={this.state.form.deliveryArea}
              size="small"
              className="inputSmall"
              disabled
            />
          </Form.Item>
          <Form.Item label="营业执照副本" prop="businessLicense">
            <img style={width} src={require('../../assets/images/logo.png')} />
          </Form.Item>
          <Form.Item label="营业执照加盖公章副本" prop="businessLicenseAndOfficialSeal">
            <img style={width} src={require('../../assets/images/logo.png')} />
          </Form.Item>
        </Form>
      </div>
    )
  }
}

export default withRouter(sellerDetail)